<template>
	<div class="shopcart">
		<div class="content" @click="toggleList">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo">
						<i class="icon-shopping_cart"></i>
					</div>
					<div class="num">数量：{{totalCount}}</div>
				</div>
				<div class="price">￥{{totalPrice}}</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right">
				<div class="pay">
					{{payDesc}}
				</div>
			</div>
		</div>
		<div class="ball-container">
			<div class="ball" transition="drop" v-for="ball in balls" v-show="ball.show">
				<div class="inner inner-hook"></div>
			</div>
		</div>
		<div class="shopcart-list" v-show="listShow" transition="fold">
			<div class="list-header">
				<h1 class="title">购物车</h1>
				<span class="empty">清空</span>
			</div>
			<div class="list-content" v-el:list-content>
				<ul>
					<li class="food" v-for="food in selectFoods">
						<span class="name">{{food.name}}</span>
						<div class="price">
							<span>￥{{food.price*food.count}}</span>
						</div>
						<div class="cartcontrol-wrapper">
							<cart-control :food="food"></cart-control>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll';
	import cartControl from 'components/cartControl/cartControl';
	export default {
		props:{
			selectFoods:{
				type:Array,
				default(){
					return [];
				}
			},
			deliveryPrice:{
				type:Number,
				default:0
			},
			minPrice:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				balls:[
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					},
					{
						show:false
					}
				],
				dropBalls:[],
				fold:true
			}
		},
		components:{
			cartControl:cartControl
		},
		computed:{
			totalPrice(){
				let total = 0;
				this.selectFoods.forEach((food)=>{
					total += food.price * food.count;
				})
				return total;
			},
			totalCount(){
				let count = 0;
				this.selectFoods.forEach((food)=>{
					count += food.count;
				})
				return count;
			},
			payDesc(){
				if(this.totalPrice === 0){
					return `￥${this.minPrice}元起送`;
				}else if(this.totalPrice<this.minPrice){
					let diff = this.minPrice - this.totalPrice;
					return `还差￥${diff}元起送`;
				}else{
					return '去结算';
				}
			},
			payClass(){
				if(this.totalPrice<this.minPrice){
					return 'not-enough';
				}else{
					return 'enough';
				}
			},
			listShow(){
				if(!this.totalCount){
					this.fold = true;
					return false;
				}
				let show = !this.fold;
				if(show){
					this.$nextTick(()=>{
						if(!this.scroll){
							this.scroll = new BScroll(this.$els.listContent,{
								click:true
							});
						}else{
							this.scroll.refresh();
						}
					})
				}
				return show;
			}
		},
		methods:{
			drop(el){
				for(let i=0;i<this.balls.length;i++){
					let ball = this.balls[i];
					if(!ball.show){
						ball.show = true;
						ball.el = el;
						this.dropBalls.push(ball);
						return;
					}
				}
			},
			toggleList(){
				if(!this.totalCount){
					return;
				}
				this.fold = !this.fold;
			}
		},
		transitions:{
			drop:{
				beforeEnter(el){
					let count = this.balls.length;
					while(count--){
						let ball = this.balls[count];
						if(ball.show){
							let rect = ball.el.getBoundingClientRect();
							let x = rect.left - 32;
							let y = -(window.innerHeight - rect.top - 22);
							el.style.display = '';
							el.style.webkitTransform = `translate3d(0,${y}px,0)`;
							el.style.transform = `translate3d(0,${y}px,0)`;
							let inner = el.getElementsByClassName('inner-hook')[0];
							inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
							inner.style.transform = `translate3d(${x}px,0,0)`;
						}
					}
				},
				enter(el){
					let rf = el.offsetHeight;
					this.$nextTick(()=>{
						el.style.webkitTransform = 'translate3d(0,0,0)';
						el.style.transform = 'translate3d(0,0,0)';
						let inner = el.getElementsByClassName('inner-hook')[0];
						inner.style.webkitTransform = 'translate3d(0,0,0)';
						inner.style.transform = 'translate3d(0,0,0)';
					})
				},
				afterEnter(el){
					let ball = this.dropBalls.shift();
					if(ball){
						ball.show = false;
						el.style.display = 'none';
					}
				}
			}
		}
	}
</script>

<style>
.shopcart{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 100;
	width: 100%;
	height: 46px;
	line-height: 46px;
	background: #ccc;
}
.content{
	
}
.content-left{
	display: inline-block;
	float: left;
}
.logo{
	float: left;
}
.num{
	float: left;
}
.content-left .price{
	float: left;
}
.content-left .desc{
	float: right;
}
.content-right:{
	display: inline-block;
	float: right;
}
.ball-container{

}
.ball-container .ball{
	position: fixed;
	left: 32px;
	bottom: 22px;
	z-index: 200;
}
.ball-container .drop-transition{
	transition: all 0.4s cubic-bezier(.49,-0.29,.75,0.41);
}
.ball-container .drop-transition .inner{
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgb(0,160,220);
	transition: all 0.4s linear;
}

.shopcart-list{
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	width: 100%;
}
.shopcart-list.fold-transition{
	transition: all .4s linear;
	transform: translate3d(0,-100%,0);
}
.shopcart-list.fold-enter,.shopcart-list.fold-leave{
	transform: translate3d(0,0,0);
}
.list-header{
	height: 40px;
	line-height: 40px;
	padding: 0 18px;
	background: #f3f5f7;
	border-bottom: 1px solid #eee;
}
.list-header .title{
	float: left;
	font-size: 14px;
	color: rgb(7,17,27);
}
.list-header .empty{
	float: right;
	font-size: 12px;
	color: rgb(0,160,220);
}
.list-content{
	background: #fff;
	padding: 0 18px;
	max-height: 217px;
	overflow: hidden;
}
.list-content .food{
	position: relative;
	padding: 12px 0;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
}
.list-content .food .name{
	line-height: 24px;
	font-size: 14px;
	color: rgb(7,17,27);
}
.list-content .food .price{
	position: absolute;
	right: 90px;
	bottom: 20px;
	line-height: 24px;
	font-size: 14px;
	color: #f00;
	font-weight: 700;
}
.list-content .food .cartcontrol-wrapper{
	position: absolute;
	bottom: -5px;
	right: 0;
}
</style>